<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			/*

			进入子元素时会触发

			$('#div1').mouseover(function(){
				$(this).animate({marginTop:50});
			});

			$('#div1').mouseout(function(){
				$(this).animate({marginTop:100});
			});

			*/

			/*
			
			进入子元素时不会触发

			$('#div1').mouseenter(function(){
				$(this).stop().animate({marginTop:50});
			});

			$('#div1').mouseleave(function(){
				$(this).stop().animate({marginTop:100});
			});
			*/

			/* 通过hover简写	*/
			$('#div1').hover(function(){
				$(this).stop().animate({marginTop:50});
			},function(){
				$(this).stop().animate({marginTop:100});
			});


		})

	</script>
	<style type="text/css">
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			margin:100px auto 0;
		}

		.son{
			width:100px;
			height:100px;
			background-color:green;
		}

	</style>
</head>
<body>
	<div id="div1" class="box">
		<div class="son"></div>
	</div>
</body>
</html>